<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>推送记录</title>
  <!-- AdminLTE CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <!-- DataTables CSS -->
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap4.min.css">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
  <!-- 导航栏 -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- 左侧导航链接 -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
    </ul>

    <!-- 右侧导航链接 -->
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="/admin/logout" role="button">
          <i class="fas fa-sign-out-alt"></i> 退出登录
        </a>
      </li>
    </ul>
  </nav>

  <!-- 侧边栏 -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- 品牌logo -->
    <a href="/admin" class="brand-link">
      <span class="brand-text font-weight-light">微信推送管理后台</span>
    </a>

    <!-- 侧边栏菜单 -->
    <div class="sidebar">
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <li class="nav-item">
            <a href="/admin/users" class="nav-link">
              <i class="nav-icon fas fa-users"></i>
              <p>用户管理</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="/admin/subscriptions" class="nav-link">
              <i class="nav-icon fas fa-calendar-check"></i>
              <p>订阅管理</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="/admin/push-records" class="nav-link active">
              <i class="nav-icon fas fa-history"></i>
              <p>推送记录</p>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </aside>

  <!-- 内容区域 -->
  <div class="content-wrapper">
    <!-- 内容头部 -->
    <section class="content-header">
      <div class="container-fluid">
        <h1>推送记录</h1>
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
          <label class="btn btn-default active">
            <input type="radio" name="filter" value="all" checked> 全部
          </label>
          <label class="btn btn-success">
            <input type="radio" name="filter" value="success"> 成功
          </label>
          <label class="btn btn-danger">
            <input type="radio" name="filter" value="failed"> 失败
          </label>
          <label class="btn btn-warning">
            <input type="radio" name="filter" value="pending"> 待处理
          </label>
        </div>
      </div>
    </section>

    <!-- 主要内容 -->
    <section class="content">
      <div class="container-fluid">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">推送记录列表</h3>
          </div>
          <div class="card-body">
            <table id="recordsTable" class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>用户</th>
                  <th>推送类型</th>
                  <th>推送时间</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <% records.forEach(record => { %>
                  <tr data-status="<%= record.status %>">
                    <td><%= record.id %></td>
                    <td><%= record.User.nickname || record.User.openid %></td>
                    <td><%= record.pushType %></td>
                    <td><%= new Date(record.pushTime).toLocaleString() %></td>
                    <td>
                      <span class="badge <%= record.status === 'success' ? 'bg-success' : record.status === 'failed' ? 'bg-danger' : 'bg-warning' %>">
                        <%= record.status === 'success' ? '成功' : record.status === 'failed' ? '失败' : '待处理' %>
                      </span>
                    </td>
                    <td>
                      <div class="btn-group">
                        <button class="btn btn-sm btn-info view-detail" 
                                data-toggle="modal" 
                                data-target="#recordModal"
                                data-content="<%= record.content %>"
                                data-error="<%= record.errorMsg || '无' %>">
                          <i class="fas fa-eye"></i> 详情
                        </button>
                        <% if(record.status === 'failed') { %>
                          <button class="btn btn-sm btn-primary btn-retry" 
                                  data-record-id="<%= record.id %>">
                            <i class="fas fa-redo"></i> 重试
                          </button>
                        <% } %>
                      </div>
                    </td>
                  </tr>
                <% }); %>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
  </div>

  <!-- 页脚 -->
  <footer class="main-footer">
    <div class="float-right d-none d-sm-block">
      <b>Version</b> 1.0.0
    </div>
    <strong>Copyright &copy; 2025 <a href="#">微信推送服务</a>.</strong> All rights reserved.
  </footer>
</div>

<!-- 详情模态框 -->
<div class="modal fade" id="recordModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">推送详情</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label>推送内容：</label>
          <pre class="bg-light p-3 rounded" id="modalContent"></pre>
        </div>
        <div class="form-group">
          <label>错误信息：</label>
          <pre class="bg-light p-3 rounded" id="modalError"></pre>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6/dist/jquery.min.js"></script>
<!-- AdminLTE -->
<script src="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/js/adminlte.min.js"></script>
<!-- DataTables -->
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap4.min.js"></script>
<!-- Toastr -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

<script>
$(function () {
  // 初始化DataTable
  const table = $('#recordsTable').DataTable({
    "paging": true,
    "lengthChange": false,
    "searching": true,
    "ordering": true,
    "info": true,
    "autoWidth": false,
    "responsive": true,
    "language": {
      "url": "//cdn.datatables.net/plug-ins/1.13.4/i18n/zh.json"
    }
  });

  // 状态筛选
  $('input[name="filter"]').change(function() {
    const filter = $(this).val();
    if(filter === 'all') {
      table.column().search('').draw();
    } else {
      table.column(4).search(filter).draw();
    }
  });

  // 重试功能
  $('.btn-retry').on('click', function() {
    const button = $(this);
    const recordId = button.data('record-id');
    if(confirm('确定要重试此推送吗？')) {
      $.post(`/admin/push-records/${recordId}/retry`)
        .done(() => {
          toastr.success('推送任务已重新执行');
          setTimeout(() => location.reload(), 1500);
        })
        .fail(() => toastr.error('重试失败'));
    }
  });

  // 模态框显示详情
  $('#recordModal').on('show.bs.modal', function(event) {
    const button = $(event.relatedTarget);
    $('#modalContent').text(button.data('content'));
    $('#modalError').text(button.data('error'));
  });
});
</script>
</body>
</html>